<!-- views/reconciliation/components/BatchOperationPanel.vue -->
<template>
  <el-drawer
    v-model="visible"
    title="批量操作"
    direction="rtl"
    size="400px"
  >
    <div class="batch-operation-panel">
      <div class="selection-summary">
        <el-card shadow="never">
          <div class="summary-content">
            <div class="summary-item">
              <el-icon class="summary-icon"><CreditCard /></el-icon>
              <div class="summary-text">
                <div class="summary-label">选中流水</div>
                <div class="summary-value">{{ selectedTransactions.length }}</div>
              </div>
            </div>
            <div class="summary-item">
              <el-icon class="summary-icon"><Document /></el-icon>
              <div class="summary-text">
                <div class="summary-label">选中订单</div>
                <div class="summary-value">{{ selectedOrders.length }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      
      <div class="operation-tabs">
        <el-tabs v-model="activeTab" type="card">
          <el-tab-pane label="批量匹配" name="match">
            <div class="operation-content">
              <el-alert 
                title="将选中的银行流水与销售订单进行批量匹配" 
                type="info" 
                show-icon
                :closable="false"
              />
              
              <div class="match-options">
                <el-form :model="matchOptions" label-width="100px">
                  <el-form-item label="匹配算法">
                    <el-select v-model="matchOptions.algorithm" placeholder="请选择匹配算法">
                      <el-option label="综合算法" value="comprehensive" />
                      <el-option label="精确匹配" value="exact" />
                      <el-option label="金额优先" value="amount_first" />
                      <el-option label="时间窗口" value="time_window" />
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item label="置信度阈值">
                    <el-slider 
                      v-model="matchOptions.confidenceThreshold" 
                      :min="50" 
                      :max="100" 
                      show-input
                    />
                  </el-form-item>
                  
                  <el-form-item label="自动确认">
                    <el-switch v-model="matchOptions.autoConfirm" />
                  </el-form-item>
                </el-form>
              </div>
              
              <div class="operation-actions">
                <el-button 
                  type="primary" 
                  :icon="MagicStick" 
                  @click="executeBatchMatch"
                  :disabled="!canBatchMatch"
                  :loading="matching"
                >
                  执行批量匹配
                </el-button>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="批量忽略" name="ignore">
            <div class="operation-content">
              <el-alert 
                title="将选中的银行流水标记为已忽略，不再参与匹配" 
                type="warning" 
                show-icon
                :closable="false"
              />
              
              <div class="ignore-reason">
                <el-form :model="ignoreOptions" label-width="80px">
                  <el-form-item label="忽略原因">
                    <el-select v-model="ignoreOptions.reason" placeholder="请选择忽略原因">
                      <el-option label="重复数据" value="duplicate" />
                      <el-option label="无效数据" value="invalid" />
                      <el-option label="测试数据" value="test" />
                      <el-option label="其他" value="other" />
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item label="备注说明" v-if="ignoreOptions.reason === 'other'">
                    <el-input 
                      v-model="ignoreOptions.remark" 
                      type="textarea" 
                      :rows="3" 
                      placeholder="请输入备注说明"
                    />
                  </el-form-item>
                </el-form>
              </div>
              
              <div class="operation-actions">
                <el-button 
                  type="warning" 
                  :icon="Hide" 
                  @click="executeBatchIgnore"
                  :disabled="selectedTransactions.length === 0"
                  :loading="ignoring"
                >
                  批量忽略
                </el-button>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="批量导出" name="export">
            <div class="operation-content">
              <el-alert 
                title="将选中的数据导出为Excel文件" 
                type="success" 
                show-icon
                :closable="false"
              />
              
              <div class="export-options">
                <el-form :model="exportOptions" label-width="100px">
                  <el-form-item label="导出内容">
                    <el-checkbox-group v-model="exportOptions.contentTypes">
                      <el-checkbox value="transactions">银行流水</el-checkbox>
                      <el-checkbox value="orders">销售订单</el-checkbox>
                      <el-checkbox value="matches">匹配结果</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  
                  <el-form-item label="文件格式">
                    <el-radio-group v-model="exportOptions.format">
                      <el-radio value="xlsx">Excel (.xlsx)</el-radio>
                      <el-radio value="csv">CSV (.csv)</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  
                  <el-form-item label="包含标题">
                    <el-switch v-model="exportOptions.includeHeader" />
                  </el-form-item>
                </el-form>
              </div>
              
              <div class="operation-actions">
                <el-button 
                  type="success" 
                  :icon="Download" 
                  @click="executeBatchExport"
                  :disabled="!canBatchExport"
                  :loading="exporting"
                >
                  批量导出
                </el-button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { MagicStick, Hide, Download, CreditCard, Document } from '@element-plus/icons-vue'

interface Props {
  modelValue: boolean
  selectedTransactions: any[]
  selectedOrders: any[]
}

const props = defineProps<Props>()
const emit = defineEmits(['update:modelValue', 'batch-match', 'batch-ignore'])

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const activeTab = ref('match')

const matchOptions = ref({
  algorithm: 'comprehensive',
  confidenceThreshold: 80,
  autoConfirm: true
})

const ignoreOptions = ref({
  reason: 'duplicate',
  remark: ''
})

const exportOptions = ref({
  contentTypes: ['transactions', 'orders'],
  format: 'xlsx',
  includeHeader: true
})

const matching = ref(false)
const ignoring = ref(false)
const exporting = ref(false)

const canBatchMatch = computed(() => 
  props.selectedTransactions.length > 0 && props.selectedOrders.length > 0
)

const canBatchExport = computed(() => 
  exportOptions.value.contentTypes.length > 0
)

const executeBatchMatch = async () => {
  matching.value = true
  try {
    // 模拟批量匹配过程
    await new Promise(resolve => setTimeout(resolve, 1500))
    emit('batch-match')
  } catch (error) {
    // 处理错误
  } finally {
    matching.value = false
  }
}

const executeBatchIgnore = async () => {
  ignoring.value = true
  try {
    // 模拟批量忽略过程
    await new Promise(resolve => setTimeout(resolve, 1000))
    emit('batch-ignore')
  } catch (error) {
    // 处理错误
  } finally {
    ignoring.value = false
  }
}

const executeBatchExport = async () => {
  exporting.value = true
  try {
    // 模拟批量导出过程
    await new Promise(resolve => setTimeout(resolve, 2000))
    // 导出逻辑
  } catch (error) {
    // 处理错误
  } finally {
    exporting.value = false
  }
}
</script>

<style scoped lang="scss">
.batch-operation-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .selection-summary {
    margin-bottom: 20px;
    
    .summary-content {
      display: flex;
      justify-content: space-around;
      
      .summary-item {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .summary-icon {
          font-size: 24px;
          color: #409eff;
        }
        
        .summary-text {
          .summary-label {
            font-size: 12px;
            color: #606266;
          }
          
          .summary-value {
            font-size: 18px;
            font-weight: 600;
            color: #303133;
          }
        }
      }
    }
  }
  
  .operation-tabs {
    flex: 1;
    overflow-y: auto;
    
    :deep(.el-tabs__content) {
      height: calc(100% - 55px);
      
      .el-tab-pane {
        height: 100%;
        
        .operation-content {
          height: 100%;
          display: flex;
          flex-direction: column;
          
          .match-options,
          .ignore-reason,
          .export-options {
            flex: 1;
            overflow-y: auto;
            margin: 16px 0;
          }
          
          .operation-actions {
            text-align: center;
            padding: 16px 0;
            border-top: 1px solid #e4e7ed;
          }
        }
      }
    }
  }
}
</style>